import { Fragment, PropType, defineComponent, reactive } from 'vue';
import { loadBox, logo, msgfont, ballBeat, loader } from './Loading.module.scss';

/*
---文件
*/

export default defineComponent({
    name: 'MyLoading',
    props: {
        msg: {
            type: String,
            required: true,
        },
        img: {
            type: String,
        },
        style: Object,
        loadColor: {
            type: String,
        },
    },
    methods: {
    },
    render() {
        return <Fragment>
            <div class={loadBox} style={this.style}>
                {this.img && <img class={logo} src={this.img} />}
                <div class={loader}>
                    <div class={ballBeat}>
                        <div style={{ backgroundColor: this.loadColor ? this.loadColor : '#677D93' }}></div>
                        <div style={{ backgroundColor: this.loadColor ? this.loadColor : '#677D93' }}></div>
                        <div style={{ backgroundColor: this.loadColor ? this.loadColor : '#677D93' }}></div>
                    </div>
                </div>
                <div class={msgfont} style={{ color: this.loadColor ? this.loadColor : '#677D93' }}>{this.msg}</div>
            </div>
        </Fragment>;
    },
});